<div id="app" class="layui-card" style="box-shadow: none;border: none;">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title" style="text-align: center;">
            <li class="layui-this">待办(<span id="approveCount"></span>)</li>
            <li>私信(<span id="personal"></span>)</li>
        </ul>
        <div class="layui-tab-content" style="padding: 0;">
            <!-- tab1 -->
            <div class="layui-tab-item layui-show">
                <div class="message-list" id="taskList">
                    <!--这里显示所有待处理流程任务列表-->
                </div>
                <!-- 列表为空 -->
                <div class="message-list-empty">
                    <i class="layui-icon layui-icon-notice"></i>
                    <div>没有通知</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var _instanceId;
    layui.use(['element', 'admin', 'layer'], function () {
        var $ = layui.jquery;
        var admin = layui.admin;
        var layer = layui.layer;
        /* 加载更多按钮点击事件 */
        $('#messageMoreBtn2').click(function () {
            var $that = $(this);
            admin.btnLoading($that);
            setTimeout(function () {
                admin.btnLoading($that, false);
                $that.before($that.prev()[0].outerHTML);
            }, 300);
        });

        /* 清空消息点击事件 */
        $('#messageClearBtn1,#messageClearBtn2,#messageClearBtn3').click(function () {
            $(this).parents('.layui-tab-item').addClass('show-empty');
        });
        queryTask();


        function queryTask() {
            $.post('/office/flowStepApprove/queryTaskList', {
                page: 1,
                rows: 15,
                status: 2
            }, function (res) {
                if (res.code == 200) {
                    let html = "";
                    res.obj.rows.forEach(item => {
                        let date = formatTime(new Date(item.instanceCrtDate));
                        html += `<a class="message-list-item" onclick="openApprove('${item.instanceId}','${item.content}')">
                        <i class="layui-icon layui-icon-speaker message-item-icon"></i>
                        <div class="message-item-right">
                            <h2 class="message-item-title">你收到了&nbsp;<span style="color: red">${item.creator}</span>的${item.title}</h2>
                            <p class="message-item-text">任务创建时间：&nbsp;${date}</p>
                        </div>
                    </a>`
                    });
                    $("#taskList").html(html);
                    $("#approveCount").text(res.obj.rows.length)
                }
            });
        }
    });

    function openApprove(id, content) {
        _instanceId = id;
        layer.open({
            content: 'page/' + content + '.html?instanceId=' + id,
            type: 2,
            offset: 'r',
            area: ['90%', '100%'],
            fix: false,
            maxmin: true,
            shadeClose: true,
            shade: 0.4,
            success: function (layero, index) {
            }
        })
    }

    /**提交审核结果*/
    function submitApprove() {
        let param = {};
        param.comment = $("[name='comment']").val();
        param.status = $('input[name="status"]:checked').val();
        if (typeof param.status == 'undefined') {
            showAlert('请给出审核意见！');
            return false;
        }
        if(param.status==0&&param.comment==''){
            showAlert('请填写不同意原因！');
            return false;
        }
        if(param.status==-1&&param.comment==''){
            showAlert('请填写退回原因！');
            return false;
        }
        param.person = getUserId();
        param.instanceId = _instanceId;
        if (param.status == -1) {
            returnFlowInstance();
        } else {
            layer.confirm('确认提交', function () {
                $.post("/office/flowStepApprove/approve", param, function (res) {
                    if (res.code == 200) {
                        closeDialog();
                        showMsg(res.msg);
                        queryTaskList();
                    } else {
                        showAlert(res.msg);
                    }
                })
            })
        }
    }

    /**
     * 退回流程
     */
    function returnFlowInstance() {
        let params = {};
        params.userId = getUserId();
        params.userName = getUserName();
        params.instanceId = _instanceId;
        params.reason = $("[name='reason']").val();
        layer.confirm('确认退回流程', function () {
            $.post('/office/flowStepApprove/returnFlowInstance', params, function (res) {
                if (res.code == 200) {
                    closeDialog();
                    showMsg(res.msg);
                    $("#search").click();
                    try {
                        parent.search();
                    } catch (e) {

                    }
                } else {
                    showAlert(res.msg);
                }
            })
        })
    }
</script>

<style>
    /** 消息列表样式 */
    .message-list {
        position: absolute;
        top: 48px;
        left: 0;
        right: 0;
        bottom: 45px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .message-list-item {
        display: block;
        padding: 10px 20px;
        line-height: 24px;
        position: relative;
        border-bottom: 1px solid #e8e8e8;
    }

    .message-list-item:hover, .message-btn-clear:hover, .message-btn-more:hover {
        background: #F2F2F2;
    }

    .message-list-item .message-item-icon {
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin-top: -20px;
        border-radius: 50%;
        position: absolute;
        left: 20px;
        top: 50%;
    }

    .message-list-item .message-item-icon.layui-icon {
        color: #fff;
        font-size: 22px;
        text-align: center;
        background-color: #FE5D58;
    }

    .message-list-item .message-item-icon + .message-item-right {
        margin-left: 55px;
    }

    .message-list-item .message-item-title {
        color: #666;
        font-size: 14px;
    }

    .message-list-item .message-item-text {
        color: #999;
        font-size: 12px;
    }

    .message-list-item > .layui-badge {
        position: absolute;
        right: 20px;
        top: 12px;
    }

    .message-list-item > .layui-badge + .message-item-right {
        margin-right: 50px;
    }

    .message-btn-clear, .message-btn-more {
        color: #666;
        display: block;
        padding: 10px 5px;
        line-height: 24px;
        text-align: center;
        cursor: pointer;
    }

    .message-btn-clear {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        border-top: 1px solid #e8e8e8;
    }

    .message-btn-more {
        color: #666;
        font-size: 13px;
    }

    .message-btn-more.ew-btn-loading > .ew-btn-loading-text {
        font-size: 13px !important;
    }

    .message-list-empty {
        color: #999;
        padding: 100px 0;
        text-align: center;
        display: none;
    }

    .message-list-empty > .layui-icon {
        color: #ccc;
        display: block;
        font-size: 45px;
        margin-bottom: 15px;
    }

    .show-empty .message-list-empty {
        display: block;
    }

    .show-empty .message-btn-clear, .show-empty .message-list {
        display: none;
    }

    /** //消息列表样式结束 */
</style>
